<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:48:20
-->
<template>
  <div>
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      other-show
      @init-params="initParams"
      @add-list="openEditBox()"
    >
      <span
        slot="status"
        slot-scope="scope"
        :style="`color:${
          scope.value.mealStatus === '2' ? '#F56C6C' :
          scope.value.mealStatus === '1' ? '#67C23A' : '#909399'
        }`"
      >
        {{
          scope.value.mealStatus === '2' ? '已停用' :
          scope.value.mealStatus === '1' ? '已启用' : '未启用'
        }}
      </span>
      <template slot="operate" slot-scope="scope">
        <el-button type="text" size="small" @click="openEditBox(scope.value.mealId)">编辑</el-button>
        <el-button type="text" size="small" @click="enableItem(scope.value)">{{ scope.value.mealStatus === '1' ? '停用' : '启用' }}</el-button>
        <el-button type="text" size="small" @click="deleteItem(scope.value.mealId)">删除</el-button>
      </template>
    </tab-list>
    <el-dialog
      :title="`${detail ? '编辑' : '新增'}会员套餐`"
      :visible.sync="toastShow"
      :close-on-click-modal="false"
      width="40%"
      @open="$refs.form && $refs.form.resetForm()"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList"
        :form="form"
        @on-submit="addOrEdit()"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
        <el-button @click="toastShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import editForm from '@/components/admin/edit-form.vue'
// 公共方法
import { asyncApiFun, openMessageBox, initEditList } from '@/utils/utils'
// 接口
import { mealAll, mealDelete, mealDetail, mealEnable, mealEdit, levelselList } from '@/api/member.js'
// 页面配置
import { listHedar, searchs, editList, rules } from './config/setMeal.config.js'
export default {
  components: {
    tabList,
    editForm
  },
  data() {
    return {
      toastShow: false,
      listHedar,
      searchs,
      params: {},
      editList,
      rules,
      form: {},
      apiFunction: mealAll,
      detail: null
    }
  },
  created() {
    this.getLevelList()
  },
  methods: {
    // 请求会员等级列表
    async getLevelList() {
      const [res] = await asyncApiFun(levelselList, {})
      if (res) {
        const _arr = []
        res.data.forEach(item => {
          _arr.push({
            value: item.levelId,
            title: item.levelName
          })
        })
        this.initSelectList(_arr)
        this.initEditList(_arr)
      }
    },
    // 初始化列表筛选会员等级筛选框列表
    initSelectList(levelList) {
      for (let i = 0; i < this.searchs.length; i++) {
        const item = this.searchs[i]
        if (item.key === 'levelId') {
          item.selectList = [...levelList]
          break
        }
      }
    },
    // 初始化新增/编辑弹窗会员等级筛选框列表
    initEditList(levelList) {
      for (let i = 0; i < this.editList.length; i++) {
        const item = this.editList[i]
        if (item.key === 'levelId') {
          item.options = [...levelList]
          break
        }
      }
    },
    // 启用
    enableItem(item) {
      const _content = (item.mealStatus === '1' ? '停用后，会员套餐不可作为购买项，是否确认？' : '启用后，会员套餐可作为购买项，是否确认？')
      const _title = `${item.mealStatus === '1' ? '停用' : '启用'}会员套餐`
      console.log(item.mealStatus === '1')
      openMessageBox({
        content: _content,
        title: _title
      }, async boole => {
        if (boole) {
          const parasm = {
            id: item.mealId,
            status: (item.mealStatus === '1' ? '2' : '1')
          }
          const [res] = await asyncApiFun(mealEnable, parasm)
          if (res) this.$refs.list.getList()
        }
      })
    },
    // 删除
    deleteItem(id) {
      openMessageBox({
        content: '删除数据后，将不可恢复，是否确认？',
        title: '删除数据'
      }, async boole => {
        if (boole) {
          const [res] = await asyncApiFun(mealDelete, id)
          if (res) this.$refs.list.getList()
        }
      })
    },
    // 打开新增或者编辑弹窗
    openEditBox(id) {
      this.getDetail(id)
      this.toastShow = true
    },
    // 获取套餐详情
    async getDetail(id) {
      let _detail = null
      if (id) {
        const [res] = await asyncApiFun(mealDetail, id)
        if (res) _detail = res.data
      } else {
        _detail = null
      }
      this.detail = _detail
      // 重置编辑框数据
      this.form = initEditList(this.editList, this.detail)
    },
    // 新增或编辑
    async addOrEdit() {
      const _method = (this.detail ? 'put' : 'post')
      const _mealPrice = Number(this.form.mealPrice)
      if (isNaN(_mealPrice) || _mealPrice < 0) {
        return this.$message.error('请正确的金额')
      }
      const _monthCount = Number(this.form.monthCount)
      if (isNaN(_monthCount) || _monthCount % 1 !== 0) {
        return this.$message.error('请正确的有效时间')
      }
      const parasm = {
        ...this.form,
        mealPrice: _mealPrice,
        monthCount: _monthCount
      }

      if (_method === 'put') parasm.mealId = this.detail.mealId
      const [res] = await asyncApiFun(mealEdit, parasm, _method)
      if (res) {
        this.$message.success(`${_method === 'put' ? '编辑' : '添加'}成功`)
        this.toastShow = false
        this.$refs.list.getList()
      }
    },
    initParams(param) {
      this.params = param
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
